@import "./colors.less";


.post-main {
    margin: 24px 0;
    background-color: extract(@greylist, 1);
    width: 100%;
    color: extract(@greylist, 9);
    font-size: 16px;
    padding: 12px 20px;

    & .post-title {
        font-size: 36px;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-weight: 800;

        & a {
            color: extract(@greylist, 9);
            text-decoration: none;
        }
    }

    & .post-desc {
        font-size: 12px;
        text-align: center;
        color: extract(@greylist, 7);
        padding: 20px 0;

        & a {
            text-decoration: none;
            color: extract(@greylist, 6);
        }
    }

    & .post-content {
        padding: 20px;
        font-size: 18px;
        color: extract(@greylist, 7);

        & img {
            width: 100%;
        }

        & a {
            text-decoration: none;
            color: #colors[orange];
        }

        & blockquote {
            background-color: extract(@greylist, 3);
            border-left: 3px solid extract(@greylist, 5);
            padding: 6px;
        }

        & h2,
        h3,
        h4,
        h5 {
            border-left: 3px solid #colors[lemon];
            padding-left: 6px;
            margin-bottom: 24px;
        }
    }
}

.post-near {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    width: 100%;
    background-color: extract(@greylist, 1);
    padding: 24px;

    & .post-near-hr {
        width: 1px;
        height: 100%;
        border-left: 1px solid extract(@greylist, 8);
    }

    & a {
        text-decoration: none;
        color: #colors[yellow];
    }

    & div+div {
        margin-left: 20px;
    }
}

.post-footer {
    border-top: 1px solid extract(@greylist, 3);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    & .post-footer-share a {
        text-decoration: none;
        color: extract(@greylist, 8);
    }

    & div+div {
        margin-top: 12px;
    }

    & .btn-reward {
        border: 0;
        width: 48px;
        height: 48px;
        background-color: #colors[red];
        color: extract(@greylist, 1);
        font-size: 18px;
        font-weight: 700;
        border-radius: 50%;
    }
}

// 以下为评论样式
.comments-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 12px 24px;
    background-color: extract(@greylist, 1);

    & .comment-form {
        display: grid;
        grid-template-columns: minmax(100px 1fr);
        padding: 12px 24px;
        background-color: extract(@greylist, 1);
        width: 100%;
    }

    & .comment-input {
        border-radius: 3px;
        width: 100%;
        border: 0;
        border-bottom: 1px solid extract(@greylist, 5);
        font-size: 14px;
        padding: 6px 12px;
        background-color: extract(@greylist, 2);

        &:focus {
            outline: none;
        }
    }

    & .comment-form-content {
        width: 100%;
        margin-top: 24px;

        & textarea {
            width: 100%;
            background-color: extract(@greylist, 2);
            border: 0;
            padding: 12px;
            min-height: 120px;
            border-radius: 3px;

            &:focus {
                outline: none;
            }
        }
    }

    & .comment-form-menu {
        width: 100%;
        margin-top: 12px;

        & button {
            width: 100%;
            display: block;
            border: 0;
            border-radius: 3px;
            color: extract(@greylist, 1);
            background-color: #colors[cyan];
            padding: 12px 24px;
        }
    }
}

.comment-form-head {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 24px;

    & .input-group+.input-group {
        margin-left: 24px;
    }

    & a {
        text-decoration: none;
        color: #colors[orange];
    }
}

.comment-form-title {
    font-weight: 700;
}

.comments-container div[id^="list-comment-"] {
    margin-top: 36px;
    display: flex;
    align-items: flex-start;

    & .comment-avatar {
        width: 48px;
        height: 48px;

        &>img {
            border-radius: 50%;
            width: 100%;
        }
    }

    & .comment-content {
        margin-left: 12px;
        width: 100%;
        border-bottom: 1px solid extract(@greylist, 4);

        & .comment-author {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 12px;

            & a {
                text-decoration: none;
                color: extract(@greylist, 9);
            }
        }

        & .comment-text {
            background-color: #colors[lemon];
            padding: 12px 24px;
            width: 100%;
            border-top-left-radius: 12px;
            border-bottom-right-radius: 12px;
            margin-bottom: 12px;
        }

        & .comment-footer {
            font-size: 14px;
            margin-bottom: 12px;

            &>time {
                margin-right: 6px;
                color: extract(@greylist, 6);
            }

            &>a {
                border: 0;
                padding: 12px;
                border-radius: 6px;
                text-decoration: none;
                color: extract(@greylist, 7);
                font-weight: 550;

                &:focus {
                    outline: none;
                }
            }
        }
    }
}

.comment-childrens {
    & div[id^="list-comment-"] {
        margin-top: 12px !important;
    }

    & .comment-content {
        margin-left: 12px !important;
        border-bottom: 0 !important;
    }
}

.comment-list {
    margin: 0;
    padding: 0;

    & li {
        display: block;
    }
}

.cancel-comment-reply {
    & a {
        color: extract(@greylist, 7);
        text-decoration: none;
    }
}